<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script> -->
		<script src="../js/jquery-3.5.1.min.js">
			
		</script>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
				margin:center;
				
			}
			#div1{
				width:500px;
				height:300px;
				margin-left:42%;
				margin-top:5%;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		<script>
			// function addRow() {
			// 	var fRow = document.getElementById("row3");
			// 	var newRow = document.createElement("tr"); //创建行节点
			// 	var col1 = document.createElement("td"); //创建单元格节点
			// 	col1.innerHTML = "幸福从天而降"; //为单元格添加文本
			// 	var col2 = document.createElement("td");
			// 	col2.innerHTML = "&yen;18.50";
			// 	col2.setAttribute("align", "center");
			// 	newRow.appendChild(col1); //把单元格添加到行节点中
			// 	newRow.appendChild(col2);
			// 	document.getElementById("row1").parentNode.insertBefore(newRow, fRow); //把行节点添加到表格末尾
			// }

			// function updateRow() {
			// 	var uRow = document.getElementById("row1");
			// 	//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
			// 	uRow.setAttribute("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
			// }

			// function delRow() {
			// 	var dRow = document.getElementsByTagName("tr"); //访问被删除的行
			// 	if(dRow[2]!=null){
			// 		dRow[2].parentNode.removeChild(dRow[2]); //删除行
			// 	}
			// }

			// function copyRow() {
			// 	var oldRow = document.getElementById("row3"); //访问复制的行
			// 	var newRow = oldRow.cloneNode(true); //复制指定的行及子节点
			// 	document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
			// }
			$(document).ready(function(){
				$("#btn1").click(function(){
					$("tr:last").after("<tr><td>60幸福从天而降</td><td>&nbsp&nbsp&nbsp&nbsp&nbsp"
				+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&yen;18.50</td></tr>");
					// 添加id号无法获取
					
					// 179000910陈润强
					
				});
				$("#btn2").click(function(){
					$("tr:eq(1)").remove();
				});
				$("#btn3").click(function(){					
					$("#row1").css({"background-color":"#cccccc","text-align":"center","font-weight":"bold"})
				});
				$("#btn4").click(function(){
					$("tr:last").clone().insertBefore("tr:last");
				});
			});
		</script>
	</head>

	<body>
		<div id="div1">
			<table border="0" cellspacing="0" cellpadding="0" id="myTable">
				<tr id="row1">
					<td>书名</td>
					<td>价格</td>
				</tr>
				<tr id="row2">
					<td>看得见风景的房间</td>
					<td class="center">&yen;30.00</td>
				</tr>
				<tr id="row3">
					<td>60个瞬间</td>
					<td class="center">&yen;32.00</td>
				</tr>
			</table>
			<input name="b1" id="btn1" type="button" value="增加一行"/>
			<input name="b2" id="btn2" type="button" value="删除第2行"  />
			<input name="b3" id="btn3" type="button" value="修改标题样式" />
			<input name="b4" id="btn4" type="button" value="复制最后一行" />
		</div>
		

	</body>

</html>